<template>
  <div class="qrcode-view">
    <div class="input">
      <input
        type="text"
        class="input-view"
        v-model="sendText"
        placeholder="请输入内容"
      />
      <div class="btn" @click="getQRCode">生成二维码</div>
    </div>
    <div v-if="imgUrl">
      <p>预览二维码：</p>
      <img :src="imgUrl" alt="" />
    </div>
    <div class="content">
      <hr class="gray" />
      <p>使用方法：</p>
      <div class="list">
        <p class="label">第一步</p>
        <p class="value gray">npm install --save qrcode</p>
      </div>
      <div class="list">
        <p class="label">第二步</p>
        <p class="value gray">在页面引用 import QRCode from "qrcode";</p>
      </div>
      <p>提示：</p>
      <p class="value gray">
        二维码一般多用于海报或者分享项目的时候展示，生成二维码后通过canvas绘制到海报上面
      </p>
      <p>
        npm 地址：<a href="https://www.npmjs.com/package/qrcode"
          >npm qrcode 用法</a
        >
      </p>
      <p class="value gray">本demo中在canvas - 静态canvas - 海报 中有使用</p>
      <router-link to="/canvas/static">canvas 生成海报</router-link>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import QRCode from "qrcode";
export default {
  data() {
    return {
      imgUrl: "",
      sendText: "",
    };
  },
  methods: {
    getQRCode() {
      if (!this.sendText) {
        return Toast.fail("请输入内容");
      }
      QRCode.toDataURL(this.sendText, { color: { light: "#ffffff60" } }).then(
        (url) => {
          this.imgUrl = url;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.qrcode-view {
  margin: 20px 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  .input-view {
    display: block;
    border: none;
    border-bottom: 1px solid #ccc;
  }
  .btn {
    display: inline-block;
    margin: 10px 0 10px;
    padding: 5px 20px;
    border-radius: 8px;
    background-color: #67c23a;
    color: #fff;
    font-size: 12px;
  }
  .content {
    font-size: 14px;
    .gray {
      color: gray;
    }
    .label {
      margin: 8px;
    }
    .value {
      margin: 8px;
    }
  }
}
</style>